﻿@page "/components/modal"

<Pager Title="Modal" Indicates="@(new[]{"Example","Live Demo","Static backdrop","Scrollable Content","Vertically centered","Remove Annimation","Size","Full Screen"})">
	<Demo Title="Example">
		<Code>
			@MD.Write(@"
```html
<Modal>
	<HeadContent>
		Model head content is here.
	</HeadContent>
	<ChildContent>
		Modal body content is here.
	</ChildContent>
	<FootContent>
		Modal foot content is here.
	</FootContent>
</Modal>
```
")
		</Code>
	</Demo>
	<Demo Title="Live Demo">
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#demo"))">Live Demo</Button>
			<Modal id="demo">
				<HeadContent>
					<h4>Modal Head</h4>
				</HeadContent>
				<ChildContent>
					Modal body gose here.
				</ChildContent>
				<FootContent>
					<Button>Submit</Button>
					<Button Color="Color.Secondary" Outline Trigger="Trigger.Dismiss(DismissName.Modal)">Close</Button>
				</FootContent>
			</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Trigger=""@(Trigger.Toggle(Trigger.Modal).Target(""#demo""))"">Live Demo</Button>
<Modal id=""demo"">
	<HeadContent>
		<h4>Modal Head</h4>
	</HeadContent>
	<ChildContent>
		Modal body gose here.
	</ChildContent>
	<FootContent>
		<Button>Submit</Button>
		<Button Color=""Color.Secondary"" Outline Trigger=""Trigger.Dismiss(Trigger.Modal)"">Close</Button>
	</FootContent>
</Modal>
```
")
		</Code>
	</Demo>
		<Demo Title="Static backdrop">
			<Description>
				When backdrop is set to static, the modal will not close when clicking outside it. <code>Trigger="Trigger.Modal(ModalBackdrop.Static)"</code>
			</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#backdrop-demo"))">Static Backdrop</Button>
			<Modal id="backdrop-demo" Trigger="@(Trigger.Modal( ModalBackdrop.Static))">
				<HeadContent>
					<h4>Modal Head</h4>
				</HeadContent>
				<ChildContent>
					Modal body gose here.
				</ChildContent>
				<FootContent>
					<Button>Submit</Button>
					<Button Color="Color.Secondary" Outline Trigger="Trigger.Dismiss(DismissName.Modal)">Close</Button>
				</FootContent>
			</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Trigger=""@(Trigger.Toggle(Trigger.Modal).Target(""#backdrop-demo""))"">Live Demo</Button>
<Modal id=""backdrop-demo"" Trigger=""@(Trigger.Modal(ModalBackdrop.Static))"">
	<HeadContent>
		<h4>Modal Head</h4>
	</HeadContent>
	<ChildContent>
		Modal body gose here.
	</ChildContent>
	<FootContent>
		<Button>Submit</Button>
		<Button Color=""Color.Secondary"" Outline Trigger=""Trigger.Dismiss(Trigger.Modal)"">Close</Button>
	</FootContent>
</Modal>
```
")
		</Code>
	</Demo>
	<Demo Title="Scrollable Content">
		<Description>
			<code>Scrollable</code> is true that allows content scroll in modal body content.
		</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#scrollable-demo"))">Scrollable Demo</Button>
			<Modal id="scrollable-demo" Scrollable>
				This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				This content should appear at the bottom after you scroll.
			</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html						
<Modal id=""scrollable-demo"" Scrollable>
	...
</Modal>
```
")

		</Code>
	</Demo>
	<Demo Title="Vertically centered">
		<Description>
			<code>Centered</code> is true to show vertically center of the modal.
		</Description>

		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#center-demo"))">Vertical Center Demo</Button>
			<Modal id="center-demo" Centered>
				<HeadContent>Modal title</HeadContent>
				<ChildContent>
				This is a vertically centered modal.
				</ChildContent>
				<FootContent>
					<Button>Submit</Button>
					<Button Color="Color.Secondary" Outline Trigger="Trigger.Dismiss(DismissName.Modal)">Close</Button>
				</FootContent>
			</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Modal Centered>
	...
</Modal>
```
")
		</Code>
	</Demo>
	<Demo Title="Remove Annimation">
		<Description>
			<code>Fade="false"</code> to close annimation when modal showing.
		</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#animation-demo"))">Remove Annimation</Button>
			<Modal id="animation-demo" Fade="false">
				<HeadContent>Modal title</HeadContent>
				<ChildContent>
					This is no animation
				</ChildContent>
				<FootContent>
					<Button>Submit</Button>
					<Button Color="Color.Secondary" Outline Trigger="Trigger.Dismiss(DismissName.Modal)">Close</Button>
				</FootContent>
			</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Modal Fade=""false"">
	...
</Modal>
```
")
		</Code>
	</Demo>
		<Demo Title="Size">
			<Description>

			</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#small"))">Small</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#default"))">Default</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#large"))">Large</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#extralarge"))">Extra Large</Button>

			<Modal id="small" Size="ModalSize.Small">
				<HeadContent>
					Small Size
				</HeadContent>
				<ChildContent>
					...
				</ChildContent>
			</Modal>
			<Modal id="default">
				<HeadContent>
					Default Size
				</HeadContent>
				<ChildContent>
					...
				</ChildContent>
			</Modal>
			<Modal id="large" Size="ModalSize.Large">
				<HeadContent>
					Large Size
				</HeadContent>
				<ChildContent>
					...
				</ChildContent>
			</Modal>
			<Modal id="extralarge" Size="ModalSize.ExtraLarge">
				<HeadContent>
					Extra Large Size
				</HeadContent>
				<ChildContent>
					...
				</ChildContent>
			</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Modal Size=""ModalSize.Small"">
	...
</Modal>

<Modal Size=""ModalSize.Large"">
	...
</Modal>


<Modal Size=""ModalSize.ExtraLarge"">
	...
</Modal>
```
")
		</Code>
	</Demo>
		<Demo Title="Full Screen">
			<Description>
				Support in different breakpoint.
			</Description>
		<Run>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#fullscreen-demo"))">Full Screen</Button>
			<Button Trigger="@(Trigger.Toggle(ToggleName.Modal).Target("#fullscreen-sm-demo"))">Full Screen SM</Button>
			<Modal FullScreen id="fullscreen-demo">
				Full Screen
			</Modal>
				<Modal FullScreen id="fullscreen-sm-demo" FullSreenBreakPoints="new []{ BreakPoint.SM }">
					Only support in SM
				</Modal>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Modal FullScreen>
	...
</Modal>
<Modal FullScreen FullSreenBreakPoints=""new []{ BreakPoint.SM }"">
	Only support in SM
</Modal>
```
")
		</Code>
	</Demo>
</Pager>